<template>
  <div class="phone-item">
    <el-row type="flex" justify="center">
      <img class="image" :src="productData.image" />
    </el-row>
    <el-row type="flex" justify="center">
      <div class="price">￥{{ productData.price }}</div>
    </el-row>
    <el-row type="flex" justify="center">
      <div class="des">{{ productData.description }}</div>
    </el-row>
    <el-row type="flex" justify="center">
      <div class="comment">{{ productData.comment }}</div>
    </el-row>
    <el-row type="flex" justify="center">
      <div class="tag">
        <el-tag v-if="productData.type == '1'" size="mini" type="danger"
          >自营</el-tag
        >
      </div>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ProductItem",
  props: ["productData"],
  methods: {},
  data() {
    return {};
  },
};
</script>

<style scoped>
.phone-item {
  width: 25%;
  margin-bottom: 20px;
  padding: 20px 0;
}
.price {
  width: 220px;
  font-size: 22px;
  color: red;
  text-align: left;
  font-weight: 500;
  margin: 5px 0;
}
.image {
  width: 220px;
  height: 220px;
}
.phone-item:hover {
  box-shadow: 0 0 3px #ccc;
  cursor: pointer;
}
.des {
  width: 220px;
  font-size: 16px;
  text-align: left;
  margin-bottom: 5px;
}
.comment {
  width: 220px;
  font-size: 14px;
  color: #646fb0;
  font-weight: 700;
  text-align: left;
  margin-bottom: 5px;
}
.tag {
  width: 220px;
  text-align: left;
}
</style>
